<template>
  <div>
    <div class="flex" >
        <div>选择打印纸张：</div>
        <a-radio-group v-model="prinType" :options="prinOptions" ></a-radio-group>
    </div>
    <div class="scllo">
      <div id="tihuoContent" style="height: auto">
        <div class="box" v-for="(item, index) in list" :key="index" :style="{height:prinType == 1?'297mm':prinType == 2?'148.5mm':'100mm',width:prinType == 1?'210mm':prinType == 2?'240mm':'240mm',padding: prinType == 1?'10mm':'10mm 24mm'}">
          <div
            class="flex justify_center"
            style="font-size: 16px; font-weight: 600"
          >
            四川威斯腾物流有限公司
          </div>
          <div
            class="flex justify_center"
            style="font-size: 16px; font-weight: 600; margin-bottom: 8px"
          >
            提货签收单
          </div>

          <div class="flex justify_between" style="margin-bottom: 8px">
            <div>提货人名称：{{ props.row[0]?.dept.name }}</div>
            <div>{{ props.process_time }}</div>
          </div>
          <div
            class="border"
            style="
              margin-bottom: 8px;
              border-bottom: 0px solid rgba(0, 0, 0, 0);
            "
          >
            <div class="flex">
              <div class="padd12 bor_r bor_b center" style="width: 80px">
                <div>序号</div>
              </div>
              <div class="padd12 bor_r bor_b center" style="width: 110px">
                <div>运单号</div>
              </div>
              <div
                class="padd12 bor_r bor_b center flex_1"
              >
                <div>品名</div>
              </div>
              <div class="padd12 bor_r bor_b center flex_1" style="width: 120px">
                <div>车号(箱号)</div>
              </div>
              <div class="padd12 bor_r bor_b center" style="width: 90px">
                <div>件数</div>
              </div>
              <div class="padd12 bor_b center" style="width: 100px">
                <div>重量</div>
              </div>
            </div>
            <div class="flex" v-for="(ite, ind) in item" :key="index">
              <div class="padd12 bor_r bor_b center" style="width: 80px">
                <div>{{ ind + 1 }}</div>
              </div>
              <div class="padd12 bor_r bor_b center" style="width: 110px">
                <div>{{ ite.yundanhao }}</div>
              </div>
              <div
                class="padd12 bor_r bor_b center flex_1"
              >
                <div>{{ ite.goods_name }}</div>
              </div>
              <div class="padd12 bor_r bor_b center flex_1" style="width: 120px">
                <div>{{ ite.transport_type == 1 ? ite.box : ite.car_no }}</div>
              </div>
              <div class="padd12 bor_r bor_b center" style="width: 90px">
                <div>{{ ite.number }}</div>
              </div>
              <div class="padd12 bor_b center" style="width: 100px">
                <div>{{ ite.weight }}</div>
              </div>
            </div>
          </div>
          <div class="flex justify_between" style="margin-bottom: 8px">
            <div>制单员：{{ props.row[0]?.create_user.nickname }}</div>
            <div>打印员：{{ props.user.nickname }}</div>
            <div>客户签字：</div>
            <div>货物交付时，如未提出异议，视为完好签收</div>
          </div>
          <div class="flex justify_center relative">
            <div>(第一联留存联，第二联客户联，第三联提货联)</div>
            <div style="position: absolute; right: 0px">
              第{{ index + 1 }}页/共{{ list.length }}页
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px" class="flex justify_end">
      <a-button v-print="printObj" type="primary">打印</a-button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, reactive, onMounted,watch } from "vue";
import predictionDeriverOrder from "@/api/prediction/predictionDeriverOrder";
import tool from "@/utils/tool";
const props = defineProps({
  row: Object,
  user: Object,
  pick_typeid: Number,
  process_time: String
});
const type = ref("1"); // 1 集装箱   2 整车
const list = ref([]);
const prinType = ref('1')   // 1 A4纸   2 1/2A4纸  3 1/3 A4纸
const lists = ref([])
const prinOptions = ref([
    { label: 'A4纸', value: '1' },
    { label: '1/2 A4纸', value: '2' },
    { label: '1/3 A4纸', value: '3' },
])
// 修改printObj配置
const printObj = {
  id: "tihuoContent",
  popTitle: "页面打印"
};
const handlegetCount = () => {
  predictionDeriverOrder
    .getCount({ type: 5, link_id: props.row.id })
    .then((res) => {
      console.log(res);
    });
};
const splitArray = (arr,type) =>{
    //  1  22  2  7   3 
    const result = [];
    let num = 0
    if(type == 1){
       num = 22 
    }else if(type == 2){
        num = 7
    }else if(type == 3){
        num = 3
    }
    for (let i = 0; i < arr.length; i += num) {
        result.push(arr.slice(i, i + num));
    }
    return result;
 }
 watch(
  prinType,
  (newVal, oldVal) => {
    list.value = splitArray(lists.value,newVal)
  }
  
)

onMounted(() => {
  lists.value = JSON.parse(JSON.stringify(props.row));
  let newArr = splitArray(lists.value,prinType.value)
  list.value = newArr;
});
</script>

<style lang="less" scoped>
.scllo {
  overflow-y: scroll;
  height: 700px;
  scrollbar-width: none;
}
.scllo::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}
// 修改.box基础样式
.box{
    width: 210mm;
    height: 297mm;
    padding: 10mm 20mm;
    box-sizing: border-box;
    position: relative;
}
@media print {
    .box {
        margin-bottom: 0 !important;
        page-break-after: always !important;
    }
}
.page-break {
  page-break-before: always;
}
.logoImg {
  position: absolute;
  top: 10mm;
  width: 200px;
}
.border {
  border: 1px solid rgba(0, 0, 0, 1);
}
.bor_r {
  border-right: 1px solid rgba(0, 0, 0, 1);
}
.bor_b {
  border-bottom: 1px solid rgba(0, 0, 0, 1);
}
.padd12 {
  padding: 3mm 10px;
  box-sizing: border-box;
}
.text_center {
  text-align: center;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.relative {
  position: relative;
}
</style>
